<template>
  <div class="_wz_TravelLogDetail">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="12%">
        <col width="12%">
        <col width="18%">
        <col width="12%">
        <col width="18%">
        <col width="12%">
        <col width="16%">
      </colgroup>
      <tbody>
      <tr>
        <td colspan="7" style="text-align: center;position: relative;">
          <span style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;position: relative;">
            {{formData.vehiclePlateNo + ' 车辆行车三检日志'}}
          </span>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">运单编号</td>
        <td colspan="2">{{formData.logRecordNumber}}</td>
        <td style="text-align: center;">经营企业</td>
        <td colspan="2">{{formData.deptName}}</td>
        <td style="text-align: center;">
          <Tag type="dot" v-if="formData.checkType != 3" >未完成</Tag>
          <Tag v-else color="success">已完成</Tag>
        </td>
      </tr>
      <tr>
        <td rowspan="4" style="text-align: center;">运输任务</td>
        <td>运输车辆</td>
        <td>
          {{formData.vehiclePlateNo}}
          <Tag v-if="formData.transportSubName" color="success">{{ formData.transportSubName }}</Tag>
        </td>
        <td>车架号</td>
        <td>{{formData.vehicleFrameNo}}</td>
        <td>天气情况</td>
        <td>{{formData.weather}}</td>
      </tr>
      <tr>
        <td>运输性质</td>
        <td>{{formData.goods}}</td>
        <td>从业人员</td>
        <td>{{formData.driverName}}</td>
        <td>联系电话</td>
        <td>{{formData.driverPhone}}</td>
      </tr>
      <tr>
        <td>发车时间</td>
        <td>{{formData.beginDate}}</td>
        <td>收车时间</td>
        <td>{{formData.endDate}}</td>
        <td>额定荷载</td>
        <td>{{formData.ratedLoad}}</td>
      </tr>
      <tr>
        <td>发车地点</td>
        <td>{{formData.beginLocation}}</td>
        <td>收车地点</td>
        <td>{{formData.endLocation}}</td>
        <td>实际荷载</td>
        <td>{{formData.actualLoad}}</td>
      </tr>
      <tr v-if="beforeRemindContext.length >= 1">
        <td>行车安全问询</td>
        <td colspan="6" style="line-height: 30px;padding: 10px;">
          <template v-for="item,index in beforeRemindContext">
            <Alert :type="item.remindResult == item.remindAnswer?'success':'error'">{{ index+1}}. {{item.remindName}}</Alert>
          </template>
        </td>
      </tr>
      <template v-if="formData.beforeCheckTime">
        <tr>
          <td rowspan="4" style="text-align: center;">出车前<br />检查</td>
          <td colspan="5" style="padding: 10px;line-height: 30px;">
            <template v-for="item,index in beforeCheckContext">
              <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                {{item.checkValue}}
              </Checkbox>
              <br />
            </template>
          </td>
          <td rowspan="4">
            <div class="demo-upload-list">
               <Image :src="!!formData.beforeCheckImg ? apiUrl.imgUrl + formData.beforeCheckImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.beforeCheckImg ? apiUrl.imgUrl + formData.beforeCheckImg : 'img/zwtpxd.png']" />
            </div>
            <div class="demo-upload-list">
               <Image :src="!!formData.beforeSignImg ? apiUrl.imgUrl + formData.beforeSignImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.beforeSignImg ? apiUrl.imgUrl + formData.beforeSignImg : 'img/zwtpxd.png']" />
            </div>
          </td>
        </tr>
        <tr>
          <td>出车结论</td>
          <td colspan="4" style="padding: 10px;">
            {{formData.beforeConclusion == 0 ? '不符合出车要求' : '良好可以行驶'}}
            <!--                <RadioGroup v-model="formData.beforeConclusion" disabled>-->
            <!--                  <Radio :label="0" disabled>不符合出车要求</Radio>-->
            <!--                  <Radio :label="1" disabled>良好可以行驶</Radio>-->
            <!--                </RadioGroup>-->
          </td>
        </tr>
        <tr>
          <td>检查人</td>
          <td>{{formData.beforeCheckUser}}</td>
          <td>检查时间</td>
          <td colspan="2">
            {{formData.beforeCheckTime}}
          </td>
        </tr>
        <tr>
          <td>故障处理</td>
          <td colspan="4">{{formData.beforeTroubleshooting}}</td>
        </tr>
      </template>
      <template v-if="formData.midwayCheckTime">
        <tr>
          <td rowspan="3" style="text-align: center;">行车中<br />检查</td>
          <td colspan="5" style="padding: 10px;line-height: 30px;">
            <template v-for="(item,index) in midwayCheckContext">
              <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                {{item.checkValue}}
              </Checkbox>
              <br />
            </template>
          </td>
          <td rowspan="3">
            <div class="demo-upload-list">
              <Image :src="!!formData.midwayCheckImg ? apiUrl.imgUrl + formData.midwayCheckImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.midwayCheckImg ? apiUrl.imgUrl + formData.midwayCheckImg : 'img/zwtpxd.png']" />
            </div>
            <div class="demo-upload-list">
              <Image :src="!!formData.midwaySignImg ? apiUrl.imgUrl + formData.midwaySignImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.midwaySignImg ? apiUrl.imgUrl + formData.midwaySignImg : 'img/zwtpxd.png']" />
            </div>
          </td>
        </tr>
        <tr>
          <td>检查人</td>
          <td colspan="1">{{formData.midwayCheckUser}}</td>
          <td>检查时间</td>
          <td colspan="2">
            {{formData.midwayCheckTime}}
          </td>
        </tr>
        <tr>
          <td>故障处理</td>
          <td colspan="4">{{formData.midwayTroubleshooting}}</td>
        </tr>
      </template>
      <template v-if="formData.afterCheckTime">
        <tr>
          <td rowspan="3" style="text-align: center;">收车后<br />检查</td>
          <td colspan="5" style="padding: 10px;line-height: 30px;">
            <template v-for="item,index in afterCheckContext">
              <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                {{item.checkValue}}
              </Checkbox>
              <br />
            </template>
          </td>
          <td rowspan="3">
            <div class="demo-upload-list">
              <Image :src="!!formData.afterCheckImg ? apiUrl.imgUrl + formData.afterCheckImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.afterCheckImg ? apiUrl.imgUrl + formData.afterCheckImg : 'img/zwtpxd.png']" />
            </div>
            <div class="demo-upload-list">
              <Image :src="!!formData.afterSignImg ? apiUrl.imgUrl + formData.afterSignImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!formData.afterSignImg ? apiUrl.imgUrl + formData.afterSignImg : 'img/zwtpxd.png']" />
            </div>
          </td>
        </tr>
        <tr>
          <td>检查人</td>
          <td>{{formData.afterCheckUser}}</td>
          <td>检查时间</td>
          <td colspan="2">{{formData.afterCheckTime}}</td>
        </tr>
        <tr>
          <td>故障处理</td>
          <td colspan="4">{{formData.afterTroubleshooting}}</td>
        </tr>
      </template>


      <template v-if="shiftRecord.length >= 1">
        <template v-for="(item,index) in shiftRecord">
          <tr>
            <td :rowspan="shiftRecord.length * 2" style="text-align: center;" v-if="index == 0">交接班<br />记录</td>
            <td>驾驶时长</td>
            <td>{{parseInt(item.continuousTime / 60)}}小时{{item.continuousTime % 60}}分钟</td>
            <td>时间区间</td>
            <td colspan="2">{{item.beginDrive}} 至 {{item.endDrive}}</td>
            <td rowspan="2"  style="padding:10px;text-align: center;">
              <div class="demo-upload-list" style="margin: auto;">
                <Image :src="!!item.shiftImg ? apiUrl.imgUrl + item.shiftImg : 'img/zwtpxd.png'" fit="contain" width=100% height=100% preview :preview-list="[!!item.shiftImg ? apiUrl.imgUrl + item.shiftImg : 'img/zwtpxd.png']" />
              </div>
            </td>
          </tr>
          <tr>
            <td>交接地点</td>
            <td>{{item.breakPoint}}</td>
            <td>交/接班人</td>
            <td colspan="2">{{item.shifter}} <Icon type="md-arrow-forward" /> {{item.successor}}</td>
          </tr>
        </template>
      </template>
      <tr>
        <td style="text-align: center;">安全<br />负责人</td>
        <td colspan="6"></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>


import {resolveComponent,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import {systemDictList} from "../../../util/commonInterfaces.js";//字典接口


//reactive
export default defineComponent({
  name: 'TravelLogDetail',//组件名称
  props: ['selectData'],//接收来自父组件的数据
  components: {
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    // 用于获取$refs
    const wzTbale = ref();


    const state = reactive({
      formData: {
        beforeTroubleshooting: '无',
        midwayTroubleshooting: '无',
        afterTroubleshooting: '无',
        beforeConclusion: 1,
        weather: "晴"
      },//出车日志基本信息


      beforeCheckContext:[],//行车前检查项记录
      midwayCheckContext:[],//行车中检查项记录
      afterCheckContext:[],//收车后检查项记录
      beforeRemindContext:[],//询问项

      shiftRecord: [],//交班记录

      notificationContent: [],//告知内容

    });



    //搜索方法
    const loadData = ()=>{


      $axios.post(apiUrl.safetyDrivingLogDrivingLogInfo,{uuid:props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.formData = res.data.data;//出车信息

          state.beforeCheckContext = !!res.data.data.beforeCheckContext?JSON.parse(res.data.data.beforeCheckContext):[];
          state.midwayCheckContext = !!res.data.data.midwayCheckContext?JSON.parse(res.data.data.midwayCheckContext):[];
          state.afterCheckContext = !!res.data.data.afterCheckContext?JSON.parse(res.data.data.afterCheckContext):[];

          state.beforeRemindContext = !!res.data.data.beforeRemindContext?JSON.parse(res.data.data.beforeRemindContext):[];
          state.shiftRecord = res.data.data.shiftList;//交班记录
        }
      }).catch((err) => {
        console.log("失败", err)
      })

    }




    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      wzTbale,// ref 使用 封装的表格
      apiUrl,
    }
  }
})


</script>

<style lang="less">
  ._wz_TravelLogDetail {
    height: 100%;
    overflow: auto;

      table {
        border-top: 1px solid #515a6e;
        border-left: 1px solid #515a6e;
        width: 100%;
        table-layout:fixed;

        td {
          min-width: 0;
          height: 40px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          border-right: 1px solid #515a6e;
          border-bottom: 1px solid #515a6e;
          padding-left: 18px;
          padding-right: 18px;
          overflow:hidden;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
      }

      ._wz_tableInput {
        ._wz_tableInput_span {
          width: 80px;
          display: inline-block;
          height: 33px;
          line-height: 33px;
        }

        .ivu-form-item {
          display: inline-block;
          width: calc(100% - 85px);
        }
      }

      .ivu-select-selection {
        border: 0px;
      }

      input {
        border: 0px;
        border-bottom: 1px solid #dcdee2;
        border-radius: 0px;
      }

      textarea.ivu-input {
        border: 0px;
        resize: none;
      }



    .demo-upload-list {
      display: inline-block;
      width: 90%;
      //width: 140px;
      height: 80px;
      text-align: center;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;
    }

    .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner {
      border-color: #2d8cf0 !important;
      background-color: #2d8cf0 !important;
    }

    .ivu-radio-disabled .ivu-radio-inner {
      border-color: #2d8cf0 !important;
    }

    .ivu-radio-disabled .ivu-radio-inner:after {
      background-color: #2d8cf0;
    }

    .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
      border-color: #fff;
    }
  }
</style>
